<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>map demo</title>
    <link rel="stylesheet" href="js/lib/ol4.6.4/ol.css" type="text/css">
    <link rel="stylesheet" href="css/demo.css" type="text/css">
</head>
<body>
<div id="map"></div>
<script src="js/lib/ol4.6.4/ol.js"></script>
<script src="js/lib/jquery/jquery-3.3.1.min.js"></script>
<script>
    var projection = new ol.proj.Projection({
        code: 'EPSG:4326',
        units: 'degrees',
        axisOrientation: 'neu'
    });

    var view = new ol.View({
        zoom: 4,
        center:[110, 39],
        projection: projection
    });

    var map = new ol.Map({
        controls: ol.control.defaults({
            attribution: false
        }).extend([]),
        target: "map",
        layers: [
            getTileLayer('lzugis:layer_base')
        ],
        view: view
    });

    function getTileLayer(lyr){
        var gridsetName = 'EPSG:4326';
        var gridNames = ['EPSG:4326:0', 'EPSG:4326:1', 'EPSG:4326:2', 'EPSG:4326:3', 'EPSG:4326:4', 'EPSG:4326:5', 'EPSG:4326:6', 'EPSG:4326:7', 'EPSG:4326:8', 'EPSG:4326:9', 'EPSG:4326:10', 'EPSG:4326:11', 'EPSG:4326:12', 'EPSG:4326:13', 'EPSG:4326:14', 'EPSG:4326:15', 'EPSG:4326:16', 'EPSG:4326:17', 'EPSG:4326:18', 'EPSG:4326:19', 'EPSG:4326:20', 'EPSG:4326:21'];
        var baseUrl = 'http://localhost:8086/geoserver/gwc/service/wmts';
        var format = 'application/x-protobuf;type=mapbox-vector';
        // var format = 'application/json;type=geojson';
        var layerName = lyr;
        var resolutions = [0.703125, 0.3515625, 0.17578125, 0.087890625, 0.0439453125, 0.02197265625, 0.010986328125, 0.0054931640625, 0.00274658203125, 0.001373291015625, 6.866455078125E-4, 3.4332275390625E-4, 1.71661376953125E-4, 8.58306884765625E-5, 4.291534423828125E-5, 2.1457672119140625E-5, 1.0728836059570312E-5, 5.364418029785156E-6, 2.682209014892578E-6, 1.341104507446289E-6, 6.705522537231445E-7, 3.3527612686157227E-7];
        var baseParams = ['VERSION','LAYER','STYLE','TILEMATRIX','TILEMATRIXSET','SERVICE','FORMAT'];

        var params = {
            'REQUEST': 'GetTile',
            'SERVICE': 'WMTS',
            'VERSION': '1.0.0',
            'LAYER': layerName,
            'TILEMATRIX': gridsetName + ':{z}',
            'TILEMATRIXSET': gridsetName,
            'FORMAT': format,
            'TILECOL': '{x}',
            'TILEROW': '{y}'
        };

        function constructSource() {
            var url = baseUrl+'?';
            for (var param in params) {
                url = url + param + '=' + params[param] + '&';
            }
            url = url.slice(0, -1);

            var source = new ol.source.VectorTile({
                url: url,
                format: new ol.format.MVT({}),
                projection: projection,
                tileGrid: new ol.tilegrid.WMTS({
                    tileSize: [256,256],
                    origin: [-180.0, 90.0],
                    resolutions: resolutions,
                    matrixIds: gridNames
                }),
                wrapX: true
            });
            return source;
        }
        var layer = new ol.layer.VectorTile({
            source: constructSource(),
            style: styleFunction
        });

        return layer;
    }
    
    function styleFunction(feat) {
        var _name = feat.get("name");
        var stroke = new ol.style.Stroke({
            color: '#fff',
            width: 1
        });
        var fill = new ol.style.Fill({
            color: 'rgba(0, 0, 255, .2)'
        });
        return new ol.style.Style({
            stroke:stroke,
            fill: fill,
            image: new ol.style.Circle({
                radius: 8,
                fill: new ol.style.Fill({
                    color: "#00f"
                })
            }),
            text: new ol.style.Text({
                text: _name,
                textAlign: "left",
                offsetX:12,
                font:"bold 13px sans-serif",
                fill: new ol.style.Fill({
                    color: 'black'
                }),
                stroke:new ol.style.Stroke({
                    color: 'white',
                    width: 2
                })
            })
        });
    }
</script>
</body>
</html>